<template>
	<view class="content">
		<view class="navback ui-cell" :style="{top: top}" @click="goBack()">
			  <image src="https://bpy.noogka.com/icon/leftIcon.png"></image>
		</view>
		<view class="head">
			<view class="text">
				教练：{{ details.name }}
			</view>
			<image :src="details.avatar" class="image"></image>
		</view>
		<view class="introduction">
			<view class="text-i">简介</view>
			<view class="content-i">{{details.abstract}}</view>
		</view>
		<view class="time">
			<view class="time-text">可用时间</view>
			<view class="time-list">
				<view class="item" v-for="(item,index) in details.support_time" :key="index" >{{item}}</view>
			</view>
		</view>
		<view class="footer">
			<view class="footerBtn" @click="order">立即预约 {{details.class_fee}}每节课</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				details:{
				},
				top:0
			}
		},
		
		onLoad(e) {
			this.id = e.id
			this.getInfo();
		},
		created() {
			console.log('getMenuButtonBoundingClientRect===>', uni.getMenuButtonBoundingClientRect());
			//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.top = menuButtonInfo.top + 'px';
		},
		methods: {
			goBack(){
				uni.navigateBack({
				  delta: 1
				});
			},
			order() {
				this.$request.request({
					url: '/open/reservation',
					method: 'post',
					data: {
						id: this.id,
					}
				}).then(res => {
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title:'预约成功'
						})
						setTimeout(function () {
						   	uni.navigateTo({
						   		url:'/pages/index/myCoach'
						   	})
						}, 2000);
					}else{  //接口请求失败的处理
						  uni.showToast({title:res.message,icon:'none'})
					}
					uni.hideLoading()
				})
			},
			getInfo() {
				uni.showLoading({
					title: '请稍后...',
					mask: true
				})
				this.$request.request({
					url: '/open/coachDetail',
					method: 'post',
					data: {
						id: this.id,
					}
				}).then(res => {
					if(res.code==200){
						if(res.data){
						   this.details = res.data
						}else{
							
						}
					}else{  //接口请求失败的处理
						  uni.showToast({title:res.message,icon:'none'})
					}
					uni.hideLoading()
				})
			}
				
		}
	}
</script>

<style lang="scss">
    .content{
		width: 100%;position: relative;background-color: #000000;
		.navback {
			width: 60rpx;height: 60rpx;border-radius: 50%;position: fixed;left: 30rpx;background: rgba(255,255,255, 0.7);z-index: 999;justify-content: center;
		}
		.head{
			width: 100%; position: relative;
			.text{
				position: absolute;
				top:150rpx;
				left:80rpx;
				color: #F4DEB9;
				font-weight: 600;
				font-size: 32rpx;
				z-index: 2;
			}
			.image{
				width: 100%;
				height: 600rpx;
			}
		}
		.introduction{
			padding: 20rpx;
			.text-i{
				color: #fff;
				font-weight: 600;
				font-size: 32rpx;
				padding-left:20rpx;
			}
			.content-i{
				color:#666;
				font-size: 28rpx;
				font-weight: 400;
				padding:20rpx;
                line-height: 1.5;
			}
		}
		.time{
			margin-top: 30rpx;
			.time-text{
				color: #fff;
				font-weight: 600;
				font-size: 32rpx;
				padding-left:20rpx;
			}
			.time-list{
				background-color: #2D2922;
				margin: 20rpx;
				margin-top: 30rpx;
				padding: 0  20rpx;
				border-radius: 8rpx;
				.item{
					color: #fff;
					font-weight: 600;
					font-size: 28rpx;
					border-bottom: 2rpx solid #6C5836;
					padding: 30rpx 0;
				}
				.item:last-child{
					border: none;
				}
			}
		}
		
		.footer{
			position: absolute;
			bottom: 120rpx;
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.footerBtn {
				width:70%;
				background: linear-gradient(to right, #EFD09E, #F4DEB9);
				display: flex;
				align-items: center;
				justify-content: center;
				color:#403B3B;
				border-radius: 8rpx;
				font-weight: 700;
				font-size: 16px;
				height: 80rpx;
			}
		}
	}
</style>
